<template>
  <div style="height:100%" class="kucunHome">
    <el-tabs type="card" class="typeOfCard" style="height:100%" v-model = "nowTab">
      <el-tab-pane label="出入库记录" style="height:100%;" name = "jilu">
        <kucunjilu :userOpernation="userOpernation" style="height:100%;"></kucunjilu>
      </el-tab-pane>
      <el-tab-pane label="库存余量" style="height:100%;" name = "yuliang">
        <kucunyuliang :userOpernation="userOpernation" style="height:100%;" :nowTab = "nowTab"></kucunyuliang>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import kucunjilu from './kuCunJiLu.vue'
  import kucunyuliang from './kucunyuliang.vue'


  export default {
    data() {
      return {
        nowTab: 'jilu'
      }
    },
    computed: {
      ...mapState(['enableStatus']),
    },
    props: ['userOpernation'],
    mounted() {
      // 如果从首页跳转过来 默认打开库存余量
      var pagePath = JSON.parse(sessionStorage.getItem('pageObj'));
      if(pagePath.oldPage == "homePage"){
        this.nowTab = "yuliang"
      }
    },
    components: {
      kucunjilu, kucunyuliang,
    },
    watch: {
      '$store.state.nowpage': function (val,oldVal) {
         console.log(val,oldVal)
      }

    },
    methods: {

    }
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
<style>
  .kucunHome .el-tabs__content {
    height: calc(100% - 47px);
  }
</style>
